<template>
	<view class="hotel-list" v-if="list.length > 0">
	  <view v-for="(item, i) in list" :key="i" class="item u-flex u-col-center u-m-b-18" @click="linkTo">
	    <u-image :src="item.image" width="200" height="320" :lazy-load="true"></u-image>
	    <view class="u-flex-1 div u-font-20">
	      <view class="name u-font-32 b u-m-b-15 u-text-row-1">{{item.name}}</view>
	      <view class="u-flex u-clo-center u-m-b-15">
	        <view class="hot"><text class="f b u-font-32 u-m-r-10">4.9</text></view>分 
	        <text class="u-m-l-10 u-tips-color">舒服舒心惬意</text>
	        <text v-if="i == 3" class="u-m-l-10 u-tips-color">120消费</text>
	        <text v-if="i == 1 || i == 4" class="u-m-l-10 u-tips-color">140条评价</text>
	      </view>
	      <view class="u-tips-color u-m-b-15">距您直线500米</view>
	      <view class="u-tips-color u-flex u-clo-center u-m-b-20 ">
	        <text v-for="(item, j) in list" :key="j" class="lab-item u-radius-4 u-font-22">小吃吧</text>
	      </view>
	      
	      <view class="u-flex u-col-center u-row-between u-m-t-30 ">
	        <view class="yhq u-flex">
	          <text class="i u-font-24">可用券</text>
	          <text class="i u-font-24">优惠￥17</text>
	        </view>
          <view class="u-flex u-col-bottom u-row-right u-line-1">
            <text class="u-tips-color u-del">￥240</text>
            <text class="b u-error u-font-34">120</text>
            <text class="u-tips-color">起</text>
          </view>
	      </view>
	    </view>
	  </view>
	</view>
</template>

<script>
	export default {
		name: "b-hotel",
		props: {
			// 按钮的文字数组，可以自定义颜色和字体大小，字体单位为rpx
			list: {
				type: Array,
				default () {
					return [];
				}
			},
		},
		methods: {
			linkTo(){
        uni.navigateTo({
          url:'/hotel/detail'
        })
      }
		}
	}
</script>
<style lang="scss">
  .hotel-list{
    align-items: stretch;
    .hot{
      position: relative;
      .f{position: relative; z-index: 8; line-height: 1;}
    }
    .item{border-radius: 10rpx; background-color: #fff; overflow: hidden;}
    .div{padding: 20rpx;}
    .lab-item{padding: 0 10rpx; line-height: 44rpx; margin-right: 10rpx; border-radius: 20rpx; background-color: #eee; font-weight: bold; color: #333;}
    .yhq{
      border:1px solid $u-type-error-disabled; color: $u-type-error;
      .i{ padding: 2rpx 8rpx; border-left: 1px dashed $u-type-error-disabled;}
      .i:first-child{border-left: none;}
    }
  }
</style>